<template>
  <div>
    <div class="launch-reason-wrap">
      <span v-if="required" class="required-sign">*</span>
      <h4>{{ label }}：</h4>
      <div>
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="launchReason"
          :placeholder="`${isDisabled ? '' : `请输入${label}`}`"
          :autosize="{ minRows: 1.1, maxRows: 4 }"
          maxlength="300"
          show-word-limit
          :disabled="isDisabled"
          @blur="handleBlurByTextarea"
        />
        <div class="warning-text" v-if="showWarningText">{{`${label}不能为空`}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    reason: {
      type: String,
      default: ''
    },
    isDisabled: { // 是否禁用
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: '发起原因'
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      launchReason: '',
      showWarningText: false
    }
  },
  watch: {
    reason (newVal) {
      this.launchReason = newVal;
    }
  },
  methods: {
    // textarea框失焦
    handleBlurByTextarea () {
      this.$emit('update:reason', this.launchReason);
      this.$emit('getReason', this.launchReason)
      this.changeShowWarningState()
    },
    changeShowWarningState () {
      this.showWarningText = this.required && !this.launchReason
    }
  }
}
</script>
<style lang="less" scoped>
.launch-reason-wrap {
  display: flex;
  margin-bottom: 10px;
  h4 {
    min-width: 70px;
  }
  div {
    flex: 1;
  }
}
.required-sign {
  color: #e20f0f;
}
.warning-text {
  color: #e20f0f;
  font-size: 10px;
}
</style>
